<template>
  <div>
    <NavBar :isShowLeft="false">
      <template slot="left">
        <van-icon name="arrow-left" @click="handleBack" />
      </template>
      <template slot="content">
        <div>{{ productInfo.productName }}</div>
      </template>
    </NavBar>
    <Loading :loading="loading">
      <van-form ref="formRules">
        <div class="c-hi306n">
          <div class="c-91t2s9">
            <div class="c-91t2s9-list">
              <!-- 投保日期 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">投保日期</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="carDateObj.toubaoDate"
                      :rules="formRules.dateTypeRules"
                      name="toubaoDate"
                      @click="handleVisible('toubaoDate')"
                    >
                      <template #input>
                        <PeoBirthday
                          ref="toubaoDate"
                          title="选择年月日"
                          @confirm="
                            value => setCarDateObj(['toubaoDate', value])
                          "
                          placeholder="请选择投保日期"
                          :defaultValue="carDateObj.toubaoDate"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 承保日期 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">承保日期</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="carDateObj.chengbaoDate"
                      :rules="formRules.dateTypeRules"
                      name="chengbaoDate"
                      @click="handleVisible('chengbaoDate')"
                    >
                      <template #input>
                        <PeoBirthday
                          ref="chengbaoDate"
                          title="选择年月日"
                          @confirm="
                            value => setCarDateObj(['chengbaoDate', value])
                          "
                          placeholder="请选择承保日期"
                          :defaultValue="carDateObj.chengbaoDate"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 生效日期 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">生效日期</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="carDateObj.shengxiaoDate"
                      :rules="formRules.dateTypeRules"
                      name="shengxiaoDate"
                      @click="handleVisible('shengxiaoDate')"
                    >
                      <template #input>
                        <PeoBirthday
                          ref="shengxiaoDate"
                          title="选择年月日"
                          @confirm="
                            value => setCarDateObj(['shengxiaoDate', value])
                          "
                          placeholder="请选择生效日期"
                          :defaultValue="carDateObj.shengxiaoDate"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
            </div>
          </div>
          <!-- 车主信息 -->
          <div class="c-91t2s9">
            <div class="c-91t2s9-title">车主信息</div>
            <div class="c-91t2s9-list">
              <!-- 车牌号 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">车牌号</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="carPeople.carNo"
                      name="carNo"
                      :rules="formRules.carNo"
                    ></van-field>
                  </div>
                </div>
              </div>
              <!-- 姓名 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">姓名</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="carPeople.name"
                      name="name"
                      :rules="formRules.nameRules"
                    ></van-field>
                  </div>
                  <img
                    class="c-8moxqg-item-img"
                    src="./img/doc3.png"
                    @click="
                      $refs.peoName.visible = true
                      $refs.peoName.value = carPeople.name
                    "
                  />
                  <PeoList
                    ref="peoName"
                    @confirm="value => handlePeopleSelect(value, 'carPeople')"
                    :columns="peopleList"
                  />
                </div>
              </div>
              <!-- 证件类型 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件类型</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="carPeople.idType"
                      name="idType"
                      :rules="formRules.cardTypeRules"
                      @click="handleVisible('carPeopleidType')"
                    >
                      <template #input>
                        <PeoInsured
                          ref="carPeopleidType"
                          title="证件类型"
                          @confirm="value => setCarPeople(['idType', value])"
                          placeholder="请选择证件类型"
                          :defaultValue="carPeople.idType"
                          :columns="cardList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 证件号码 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件号码</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="carPeople.idNo"
                      name="idNo"
                      :rules="
                        carPeople.idType == 1
                          ? formRules.cardNoeRules
                          : formRules.noEmptyRules
                      "
                      @blur="checkcarPeopleIdNO(carPeople.idNo)"
                    ></van-field>
                  </div>
                  <div
                    class="flex-row flex-align-center"
                    @click="
                      handleGoToScan(
                        'card',
                        'idNo',
                        PEOPLE_TYPE.POLICT_HOLDER,
                        'carPeople'
                      )
                    "
                  >
                    <van-icon class="c-8moxqg-item-scan" name="scan" />
                    <span class="c-8moxqg-item-img-text">扫描</span>
                  </div>
                </div>
              </div>
              <!-- 性别 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">性别</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="carPeople.sex"
                      name="sex"
                      :rules="(carPeople.idType=='B'||carPeople.idType=='C'||carPeople.idType=='D'||carPeople.idType=='P'||carPeople.idType=='Q')?undefined:formRules.sexTypeRules"
                      @click="handleVisible('sexTypeCar')"
                    >
                      <template #input>
                        <PeoInsured
                          ref="sexTypeCar"
                          title="性别"
                          @confirm="value => setCarPeople(['sex', value])"
                          placeholder="请选择性别"
                          :defaultValue="carPeople.sex"
                          :columns="sexList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 出生日期 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">出生日期</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="carPeople.birthday"
                      :rules="(carPeople.idType=='B'||carPeople.idType=='C'||carPeople.idType=='D'||carPeople.idType=='P'||carPeople.idType=='Q')?undefined:formRules.birthdayTypeRules"
                      name="birthday"
                      @click="handleVisible('birthdayTypeCar')"
                    >
                      <template #input>
                        <PeoBirthday
                          ref="birthdayTypeCar"
                          title="选择年月日"
                          @confirm="value => setCarPeople(['birthday', value])"
                          placeholder="请输入出生日期"
                          :defaultValue="carPeople.birthday"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 手机号码 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">联系电话</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="carPeople.mobile"
                      :rules="formRules.mobileRules"
                      name="mobile"
                    ></van-field>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 投保人信息 -->
          <div class="c-91t2s9">
            <div class="c-91t2s9-title">投保人信息</div>
            <div class="c-91t2s9-list">
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">同车主</div>
                  <div class="c-8moxqg-item-value">
                    <van-field :rules="formRules.noEmptyRules">
                      <template #input>
                        <van-radio-group
                          @change="
                            value =>
                              handleRadioChange(value, 'setAppPolicyHolderInfo')
                          "
                          class="c-8moxqg-item-value-text"
                          v-model="appPolicyHolderInfo.isOwner"
                          name="isOwner"
                          direction="horizontal"
                        >
                          <van-radio name="Y">是</van-radio>
                          <van-radio name="N">否</van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                  </div>
                </div>
              </div>
              <!-- 姓名 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">姓名</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="appPolicyHolderInfo.name"
                      :rules="formRules.nameRules"
                      name="name"
                    ></van-field>
                  </div>
                  <img
                    class="c-8moxqg-item-img"
                    src="./img/doc3.png"
                    @click="
                      $refs.peoName1.visible = true
                      $refs.peoName1.value = appPolicyHolderInfo.name
                    "
                  />
                  <PeoList
                    ref="peoName1"
                    @confirm="
                      value =>
                        handleTouPeopleSelect(value, 'appPolicyHolderInfo')
                    "
                    :columns="peopleList"
                  />
                </div>
              </div>
              <!-- 证件类型 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件类型</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="appPolicyHolderInfo.idType"
                      :rules="formRules.cardTypeRules"
                      name="idType"
                      @click="handleVisible('appPolicyHolderInfoidType')"
                    >
                      <template #input>
                        <PeoInsured
                          ref="appPolicyHolderInfoidType"
                          title="证件类型"
                          @confirm="
                            value => setAppPolicyHolderInfo(['idType', value])
                          "
                          placeholder="请选择证件类型"
                          :defaultValue="appPolicyHolderInfo.idType"
                          :columns="cardList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 证件号码 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件号码</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="appPolicyHolderInfo.idNo"
                      name="idNo"
                      :rules="
                        appPolicyHolderInfo.idType == 1
                          ? formRules.cardNoeRules
                          : formRules.noEmptyRules
                      "
                      @blur="
                        checkappPolicyHolderInfoIdNO(appPolicyHolderInfo.idNo)
                      "
                    ></van-field>
                  </div>
                  <div
                    class="flex-row flex-align-center"
                    @click="
                      handleGoToScan(
                        'card',
                        'idNo',
                        PEOPLE_TYPE.POLICT_HOLDER,
                        'appPolicyHolderInfo'
                      )
                    "
                  >
                    <van-icon class="c-8moxqg-item-scan" name="scan" />
                    <span class="c-8moxqg-item-img-text">扫描</span>
                  </div>
                </div>
              </div>
              <!-- 性别 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">性别</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="appPolicyHolderInfo.sex"
                      name="sex"
                      :rules="(appPolicyHolderInfo.idType=='B'||appPolicyHolderInfo.idType=='C'||appPolicyHolderInfo.idType=='D'||appPolicyHolderInfo.idType=='P'||appPolicyHolderInfo.idType=='Q')?undefined:formRules.sexTypeRules"
                      @click="handleVisible('sexTypeHolder')"
                    >
                      <template #input>
                        <PeoInsured
                          ref="sexTypeHolder"
                          title="性别"
                          @confirm="
                            value => setAppPolicyHolderInfo(['sex', value])
                          "
                          placeholder="请选择性别"
                          :defaultValue="appPolicyHolderInfo.sex"
                          :columns="sexList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 出生日期 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">出生日期</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="appPolicyHolderInfo.birthday"
                      :rules="(appPolicyHolderInfo.idType=='B'||appPolicyHolderInfo.idType=='C'||appPolicyHolderInfo.idType=='D'||appPolicyHolderInfo.idType=='P'||appPolicyHolderInfo.idType=='Q')?undefined:formRules.birthdayTypeRules"
                      name="birthday"
                      @click="handleVisible('birthdayTypeHolder')"
                    >
                      <template #input>
                        <PeoBirthday
                          ref="birthdayTypeHolder"
                          title="选择年月日"
                          @confirm="
                            value => setAppPolicyHolderInfo(['birthday', value])
                          "
                          placeholder="请输入出生日期"
                          :defaultValue="appPolicyHolderInfo.birthday"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 手机号码 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">联系电话</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      :rules="formRules.mobileRules"
                      class="c-8moxqg-item-value-text"
                      v-model="appPolicyHolderInfo.mobile"
                      name="mobile"
                    ></van-field>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 被投保人信息 -->
          <div class="c-91t2s9">
            <div class="c-91t2s9-title">被投保人信息</div>
            <div class="c-91t2s9-list">
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">同车主</div>
                  <div class="c-8moxqg-item-value">
                    <van-field :rules="formRules.noEmptyRules">
                      <template #input>
                        <van-radio-group
                          @change="
                            value =>
                              handleRadioChange(
                                value,
                                'setAppPolicyInsuredList'
                              )
                          "
                          class="c-8moxqg-item-value-text"
                          v-model="appPolicyInsuredList.isOwner"
                          name="isOwner"
                          direction="horizontal"
                        >
                          <van-radio name="Y">是</van-radio>
                          <van-radio name="N">否</van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                  </div>
                </div>
              </div>
              <!-- 姓名 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">姓名</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="appPolicyInsuredList.name"
                      :rules="formRules.nameRules"
                      name="name"
                    ></van-field>
                  </div>
                  <img
                    class="c-8moxqg-item-img"
                    src="./img/doc3.png"
                    @click="
                      $refs.peoName2.visible = true
                      $refs.peoName2.value = appPolicyInsuredList.name
                    "
                  />
                  <PeoList
                    ref="peoName2"
                    @confirm="
                      value =>
                        handleBeiPeopleSelect(value, 'appPolicyInsuredList')
                    "
                    :columns="peopleList"
                  />
                </div>
              </div>
              <!-- 证件类型 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件类型</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="appPolicyInsuredList.idType"
                      :rules="formRules.cardTypeRules"
                      name="idType"
                      @click="handleVisible('idType')"
                    >
                      <template #input>
                        <PeoInsured
                          ref="idType"
                          title="证件类型"
                          @confirm="
                            value => setAppPolicyInsuredList(['idType', value])
                          "
                          placeholder="请选择证件类型"
                          :defaultValue="appPolicyInsuredList.idType"
                          :columns="cardList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 证件号码 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件号码</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="appPolicyInsuredList.idNo"
                      name="idNo"
                      :rules="
                        appPolicyInsuredList.idType == 1
                          ? formRules.cardNoeRules
                          : formRules.noEmptyRules
                      "
                      @blur="
                        checkappPolicyInsuredListIdNO(appPolicyInsuredList.idNo)
                      "
                    ></van-field>
                  </div>
                  <div
                    class="flex-row flex-align-center"
                    @click="
                      handleGoToScan(
                        'card',
                        'idNo',
                        PEOPLE_TYPE.POLICT_INSURED,
                        'appPolicyInsuredList'
                      )
                    "
                  >
                    <van-icon class="c-8moxqg-item-scan" name="scan" />
                    <span class="c-8moxqg-item-img-text">扫描</span>
                  </div>
                </div>
              </div>
              <!-- 性别 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">性别</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="appPolicyInsuredList.sex"
                      name="sex"
                      :rules="(appPolicyInsuredList.idType=='B'||appPolicyInsuredList.idType=='C'||appPolicyInsuredList.idType=='D'||appPolicyInsuredList.idType=='P'||appPolicyInsuredList.idType=='Q')?undefined:formRules.sexTypeRules"
                      @click="handleVisible('sexTypeInsured')"
                    >
                      <template #input>
                        <PeoInsured
                          ref="sexTypeInsured"
                          title="性别"
                          @confirm="
                            value => setAppPolicyInsuredList(['sex', value])
                          "
                          placeholder="请选择性别"
                          :defaultValue="appPolicyInsuredList.sex"
                          :columns="sexList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 出生日期 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">出生日期</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="appPolicyInsuredList.birthday"
                      :rules="(appPolicyInsuredList.idType=='B'||appPolicyInsuredList.idType=='C'||appPolicyInsuredList.idType=='D'||appPolicyInsuredList.idType=='P'||appPolicyInsuredList.idType=='Q')?undefined:formRules.birthdayTypeRules"
                      name="birthday"
                      @click="handleVisible('birthdayTypeInsured')"
                    >
                      <template #input>
                        <PeoBirthday
                          ref="birthdayTypeInsured"
                          title="选择年月日"
                          @confirm="
                            value =>
                              setAppPolicyInsuredList(['birthday', value])
                          "
                          placeholder="请输入出生日期"
                          :defaultValue="appPolicyInsuredList.birthday"
                        />
                      </template>
                    </van-field>
                  </div>
                  <van-icon name="arrow" class="c-8moxqg-item-left" />
                </div>
              </div>
              <!-- 手机号码 -->
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">联系电话</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="appPolicyInsuredList.mobile"
                      name="mobile"
                      :rules="formRules.mobileRules"
                    ></van-field>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-hi306n-bottom" @click="handleNext">下一步</div>
        </div>
      </van-form>
    </Loading>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import PeoBirthday from '@/components/peoBirthday'
import PeoList from '@/components/peoList'
import PeoInsured from '@/components/peoInsured'
import comAPI from '@/services/h5/common'
import API from '@/services/h5/product'
import { mapMutations, mapGetters, mapState, mapActions } from 'vuex'
import isAppBack from '@/mixin/isAppBack'
import { getBirth, getSex } from '@/utils/public/ch-idNo.js'
import { isWeChatBrowser } from '@/config/h5/index.js'
import Loading from '@/components/data-loading'
export default {
  mixins: [isAppBack],
  components: { NavBar, PeoBirthday, PeoInsured, PeoList, Loading },
  data() {
    return {
      peoShow: false,
      sexList: [],
      cardList: [],
      peopleList: []
    }
  },
  computed: {
    ...mapGetters('common', ['formRules']),
    ...mapState('carProduct', [
      'PEOPLE_TYPE',
      'carDateObj',
      'carPeople',
      'appPolicyHolderInfo',
      'appPolicyInsuredList',
      'contractId',
      'ids',
      'productInfo'
    ]),
    ...mapState('loading', ['loading'])
  },
  mounted() {
    isWeChatBrowser && (document.title = this.$route.query.productName)
    this.init()
  },
  methods: {
    ...mapMutations('loading', ['setLoading']),
    ...mapMutations('carProduct', [
      'initData',
      'setProductInfo',
      'setCarDateObj',
      'setCarPeople',
      'setAppPolicyHolderInfo',
      'setAppPolicyInsuredList',
      'setContractId'
    ]),
    ...mapActions('carProduct', ['getProductDetailInfo']),
    //输入身份证号显示出生日期和性别
    checkcarPeopleIdNO(value) {
      if (value && this.carPeople.idType == 1) {
        this.setCarPeople(['birthday', getBirth(value)])
        this.setCarPeople(['sex', getSex(value)])
      }
    },
    validater() {

    },
    checkappPolicyHolderInfoIdNO(value) {
      if (value && this.appPolicyHolderInfo.idType == 1) {
        this.setAppPolicyHolderInfo(['birthday', getBirth(value)])
        this.setAppPolicyHolderInfo(['sex', getSex(value)])
      }
    },
    checkappPolicyInsuredListIdNO(value) {
      if (value && this.appPolicyInsuredList.idType == 1) {
        this.setAppPolicyInsuredList(['birthday', getBirth(value)])
        this.setAppPolicyInsuredList(['sex', getSex(value)])
      }
    },
    handleBack() {
      this.$dialog
        .confirm({
          title: '此页面信息未保存，确认离开页面吗'
        })
        .then(() => {
          this.judgeAppBack()
        })
        .catch(() => {})
    },
    async initCar(item) {
      this.setLoading(true)
      let res = await API.getProductInfo({
        productId: item.productId
      })
      if (res.data && res.data.code === 1000) {
        this.setProductInfo({
          productId: res.data.data.id,
          productName: res.data.data.productName
        })
      }
    },
    async init() {
      this.setLoading(true)
      // 获取所需要的字典值，性别/证件类型/银行卡类型/国籍/与投保人的关系/婚姻状况
      let res = await Promise.all([
        comAPI.getDictList({
          codeType: 'sex'
        }),
        comAPI.getDictList({
          codeType: 'idType'
        })
      ])
      this.sexList = res[0].data.data
      this.cardList = res[1].data.data
      let customer = await API.getCustomerList()
      if (customer.data && customer.data.code === 1000) {
        this.peopleList = []
        customer.data.data.list.forEach(item => {
          this.peopleList.push({
            label: item.name,
            value: item.idNo,
            ...item
          })
        })
      }
      this.setLoading(false)
    },
    handleVisible(type, index) {
      if (index !== undefined) {
        this.$refs[type][index].visible = true
      } else {
        this.$refs[type].visible = true
      }
    },
    //各个类型的选择
    handleConfirm(value, prop, data, index) {
      let flag = index !== undefined
      if (flag) {
        data[index][prop] = value
      } else {
        data[prop] = value
      }
      this.setCarDateObj([prop, value])
      this.setCarPeople([prop, value])
      this.setAppPolicyHolderInfo([prop, value])
      this.setAppPolicyInsuredList([prop, value])
    },
    handleRadioChange(value, data) {
      if (!this.carPeople.name) {
        return
      }
      if (value === 'Y') {
        for (let i in this.carPeople) {
          this[data]([i, this.carPeople[i]])
        }
      } else {
        for (let i in this.carPeople) {
          this[data]([i, ''])
        }
      }
    },
    handlePeopleSelect(value) {
      
      this.setCarPeople(['name', value.name])
      this.setCarPeople(['idNo', value.idNo])
      this.setCarPeople(['sex', value.sex])
      this.setCarPeople(['birthday', value.birthday])
      this.setCarPeople(['mobile', value.mobile])
    },
    handleTouPeopleSelect(value) {
      this.setAppPolicyHolderInfo(['name', value.name])
      this.setAppPolicyHolderInfo(['idNo', value.idNo])
      this.setAppPolicyHolderInfo(['sex', value.sex])
      this.setAppPolicyHolderInfo(['birthday', value.birthday])
      this.setAppPolicyHolderInfo(['mobile', value.mobile])
    },
    handleBeiPeopleSelect(value) {
      this.setAppPolicyInsuredList(['name', value.name])
      this.setAppPolicyInsuredList(['idNo', value.idNo])
      this.setAppPolicyInsuredList(['sex', value.sex])
      this.setAppPolicyInsuredList(['birthday', value.birthday])
      this.setAppPolicyInsuredList(['mobile', value.mobile])
    },
    handleGoToScan(type, prop, peopleType, data, index) {
      let path = '/scan'
      this.$router.push({
        path,
        query: {
          type: type,
          prop: prop,
          peopleType: peopleType,
          data,
          index
        }
      })
    },
    handleNext() {
      let params = {
        contractId: this.contractId,
        productId: this.productInfo.productId,
        ids: this.ids,
        acceptionDate: this.carDateObj.chengbaoDate,
        applicationDate: this.carDateObj.toubaoDate,
        inceptionDate: this.carDateObj.shengxiaoDate,
        // policyCar: this.carPeople,
        // policyHolder: this.appPolicyHolderInfo,
        // policyInsureds: [this.appPolicyInsuredList]
        policyCar: {
          birthday: this.carPeople.birthday,
          sex: this.carPeople.sex,
          name: this.carPeople.name,
          mobile: this.carPeople.mobile,
          idType: this.carPeople.idType,
          idNo: this.carPeople.idNo,
          carNo: this.carPeople.carNo
          // id: this.carPeople.id
        },
        policyHolder: {
          name: this.appPolicyHolderInfo.name,
          idType: this.appPolicyHolderInfo.idType,
          idNo: this.appPolicyHolderInfo.idNo,
          sex: this.appPolicyHolderInfo.sex,
          birthday: this.appPolicyHolderInfo.birthday,
          mobile: this.appPolicyHolderInfo.mobile,
          isOwner: this.appPolicyHolderInfo.isOwner
        },
        policyInsureds: [
          {
            name: this.appPolicyInsuredList.name,
            idType: this.appPolicyInsuredList.idType,
            idNo: this.appPolicyInsuredList.idNo,
            sex: this.appPolicyInsuredList.sex,
            birthday: this.appPolicyInsuredList.birthday,
            mobile: this.appPolicyInsuredList.mobile,
            isOwner: this.appPolicyInsuredList.isOwner
          }
        ]
      }
      this.$refs.formRules
        .validate()
        .then(async () => {
          this.setLoading(true)
          let res = await API.saveCustomer(params)
          if (res.data && res.data.code === 1000) {
            this.setContractId(res.data.data)
            this.$router.push({
              path: `/carSecond`,
              query: {
                contractId: res.data.data
              }
            })
            this.setLoading(false)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  beforeRouteEnter(to, from, next) {
    let initPath = [
      '/home',
      '/product',
      '/productOptimization',
      '/productDynamicsDetail'
    ]
    next(vm => {
      if (to.query.productId) {
        localStorage.setItem('successBack', '/product?active=N')
      }
      if (to.query.contractId) {
        localStorage.setItem('successBack', '/myOrder')
      }
      if (from.path == '/' && to.query.productId) {
        vm.initCar(to.query)
      }
      if (initPath.includes(from.path)) {
        vm.initData()
        vm.initCar(to.query)
      } else {
        if (from.name !== '扫描页面') {
          vm.getProductDetailInfo({
            contractId: to.query.contractId || vm.contractId
          })
        }
      }
    })
  }
}
</script>
<style lang="less" scoped>
.c-hi306n {
  position: relative;
  background: #fafafa;
  box-sizing: border-box;
  border: 0.1px solid transparent;
  // height: calc(100vh - 55px);
  // overflow-y: scroll;
  &-bottom {
    margin: 20px 15px;
    background: @c-color-primary;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 17px;
    color: #fff;
    border-radius: 4.5px;
  }
}
.c-91t2s9 {
  margin-top: 13px;
  padding: 15px;
  background: #fff;
  &-title {
    font-size: 19px;
    font-weight: bold;
    color: #000;
  }
  &-title-plus {
    color: @c-color-primary;
    font-size: 15px;
  }
  &-list {
    margin-top: 15px;
    box-shadow: rgba(0, 0, 0, 0.07) 0 0 10px 0;
    padding: 0 15px;
    &-title {
      padding: 5px 0;
      font-size: 18px;
    }
    &-del {
      font-size: 15px;
      color: @c-color-primary;
      flex-direction: row-reverse;
    }
  }
  &-list-item {
    border-bottom: 0.5px solid #e9e9e9;
  }
}
.c-8moxqg-item {
  &-label {
    width: 60px;
    font-size: 15px;
    color: #333;
    text-align: justify;
    text-align-last: justify;
  }
  &-value {
    flex: 1;
    /deep/.van-field--error .van-field__control::placeholder {
      color: #999;
    }
  }
  &-value-text {
    font-size: 15px;
    color: #333;
    text-align: left;
  }
  &-margin-left {
    margin-left: 15px;
  }
  &-value-text-active {
    /deep/.van-field__control:disabled {
      color: #333;
      -webkit-text-fill-color: #333;
    }
  }
  &-left {
    font-size: 16px;
    color: #999;
  }
  &-img {
    width: 15px;
    height: 15px;
  }
  &-scan {
    color: @c-color-primary;
    font-size: 16px;
    margin-right: 3px;
  }
  &-img-text {
    font-size: 14px;
    color: @c-color-primary;
  }
}
.c-d921q5 {
  height: calc(100% - 55px - 85px);
  overflow-y: scroll;
}
.c-d921q5-item {
  margin-top: 13px;
  background: #ffff;
  padding: 15px;
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
  &-title {
    font-size: 19px;
    color: #000;
    font-weight: bold;
    &-txt {
      font-size: 13px;
      color: #999;
      font-weight: normal;
    }
  }
  &-img {
    width: 15px;
    height: 15px;
  }
  &-left {
    width: 7px;
    height: 13px;
  }
  &-value {
    /deep/.van-field--error .van-field__control::placeholder {
      color: #999;
    }
    // margin-top: 15px;
    border-bottom: 0.5px solid #e9e9e9;
    &:last-child {
      border: none;
    }
  }
  &-label {
    font-size: 15px;
    color: #333;
    width: 80px;
  }
}
</style>
